<template>
  <!-- vp-raw的作用是隔绝vitepress样式对当前组件的样式影响 -->
  <div class="vp-raw" style="height: 300px">
    <div ref="containerDomRef" style="height: 100%"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import LogicFlow from '@logicflow/core'
import '@logicflow/core/dist/style/index.css'

const containerDomRef = ref()
onMounted(() => {
  const containerDom = containerDomRef.value
  if (!containerDom) return

  const lf = new LogicFlow({
    container: containerDom,
    grid: true,
    // 自定义主题：https://docs.logic-flow.cn/docs/#/zh/guide/basic/theme
    style: {
      // 自定义边文本颜色
      edgeText: {
        color: 'red',
      },
    },
  })

  lf.render({
    nodes: [
      {
        id: '1',
        type: 'rect',
        x: 100,
        y: 100,
        text: '节点1',
      },
      {
        id: '2',
        type: 'circle',
        x: 300,
        y: 200,
        text: '节点2',
      },
    ],
    edges: [
      {
        sourceNodeId: '1',
        targetNodeId: '2',
        type: 'polyline',
        text: '连线',
      },
    ],
  })
})
</script>

<style lang="scss" scoped></style>
